<template>
	<div class="micro-film">
		<div v-for="(item, index) in imgs" :key="item.id" class="item">
			<div>
				<i class="el-icon-video-play auto" @click="openFilm(item.videoUrl)"></i>
				<img :src="item.url">
			</div>
		</div>

		<el-dialog :visible="flag" :lock-scroll="false" @close="close">
			<video id="video" muted controls autoplay
				:src="videoUrl"></video>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				videoUrl: '',
				imgs: [{
						id: 1,
						url: require('@/assets/img/v1.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/6364876d033e1d7.mp4'
					},
					{
						id: 2,
						url: require('@/assets/img/v2.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/f246b4bd75c7722.mp4'
					},
					{
						id: 3,
						url: require('@/assets/img/v3.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/e938c19c7bc68c0.mp4'
					},
					{
						id: 4,
						url: require('@/assets/img/v4.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/e4a03c118b0a8.mp4'
					},
					{
						id: 5,
						url: require('@/assets/img/v5.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/194a4d6a4d75acc.mp4'
					},
					{
						id: 6,
						url: require('@/assets/img/v6.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/b01e223ff1d5c15.mp4'
					},
					{
						id: 7,
						url: require('@/assets/img/v7.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202012/eeed0e3169453.mp4'
					},
					{
						id: 8,
						url: require('@/assets/img/v8.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202012/0057477d1625ca0.mp4'
					},
					{
						id: 9,
						url: require('@/assets/img/v9.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202012/e223fa4e807673e.mp4'
					},
					{
						id: 10,
						url: require('@/assets/img/v10.jpg'),
						videoUrl: 'https://www.qjmotor.com/uploadfile/202104/b6b773157dc0a99.mp4'
					}
				]
			}
		},
		methods: {
			openFilm(url) {
				this.flag = true
				this.videoUrl = url
			},
			close() {
				this.flag = false
				if (!this.flag) {
					let myVideo = document.getElementById('video')
					myVideo.pause()
					myVideo.currentTime = 0
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.micro-film {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 49%;

			margin-top: 20px;

			div {
				width: 100%;
				position: relative;

				.auto {
					font-size: 48px;
					color: #fff;
					position: absolute;
					left: 10%;
					bottom: 10%;

					&:hover {
						cursor: pointer;
						transform: scale(1.1);
						color: #eee;
					}
				}

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.el-dialog {
			video {
				width: 100%;
			}
		}
	}
</style>
